<template>
    <div class="supports">
        <div class="support-item" v-for="(item, index) in supports" :key="index">
            <span class="item-icon" :class="iconClass[index]"></span>
            <span class="item-text">{{item.description}}</span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        supports: {
            type: Array
        }
    },
    created() {
        this.iconClass = ['deserase', 'discount', 'special', 'invoice', 'guarantee']
    }
}
</script>

<style lang="less">
.supports {
    font-size: 0;
    .support-item {
        display: flex;
        margin-bottom: 10px;
        &:last-child {
            margin-bottom: 0
        }
        .item-icon {
            display: inline-block;
            width: 16px;
            height: 16px;
            background-size: 16px 16px;
            background-repeat: no-repeat;
            &.deserase {
                background-image: url('../../assets/resource/img/decrease_2@3x.png')
            }
            &.discount {
                background-image: url('../../assets/resource/img/discount_2@3x.png')
            }
            &.guarantee {
                background-image: url('../../assets/resource/img/guarantee_2@3x.png')
            }
            &.invoice {
                background-image: url('../../assets/resource/img/invoice_2@3x.png')
            }
            &.special {
                background-image: url('../../assets/resource/img/special_2@3x.png')
            }
        }
        .item-text {
            display: inline-block;
            height: 16px;
            line-height: 16px;
            font-size: 14px;
            margin-left: 10px;
        }
    }
}
</style>
